<template>
  <div class="daily_bill_card">
    <div class="card_title">
      <div class="title_date">
        <span class="title_date_day">{{ getFormatDate(data.date) }}</span>
        <span class="title_date_week">周{{ getDateDay(data.date) }}</span>
      </div>
      <div class="title_money">
        <div class="money_total">
          收 <span class="money_total_income">{{ data.income }}</span>
        </div>
        <div class="money_total">
          支 <span class="money_total_pay">{{ data.pay }}</span>
        </div>
      </div>
    </div>
    <div class="card_list">
      <div 
        class="card_list_item" 
        v-for="(item, index) in data.bills" 
        :key="'list'+index" 
        @click.stop="handleGoDetail(item)" 
        @touchstart="touchStart"
        @touchend.stop="touchEnd"
      >
        <div class="item_icon">
          <i 
            :class="[multipleShow ? multipleList.includes(item) ? 'icon-yuanxingxuanzhong' : 'icon-yuanxingweixuanzhong' : item.icon ]" 
            class="iconfont bill_icon"
            style="color: #F9C3C2;"
          ></i>
          <div class="item_text">
            <div class="item_text_title">{{ getTitle(false, item.titleId) }}{{ item.subTitleId ? " - " : '' }}{{ getTitle(true, item.subTitleId) }}</div>
            <div class="item_text_desc">{{ item.desc }}</div>
          </div>
        </div>
        <div class="item_money">
          <div 
            class="item_money_number" 
            :class="[item.type === 'pay' ? 'money_total_pay' : 'money_total_income']"
          >{{ item.type === 'pay' ? '-' : '+' }} {{ item.money }}</div>
          <div class="item_money_account">{{ item.account }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
import { getClassTitle } from '@/utils/helper';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'DailyBillCard',
  props: {
    data: {
      type: Object,
      required: true
    },
    multipleShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const router = useRouter()
    const store = useStore()
    const classList = computed(() => store.state.classList)
    let touchInterval: number
    const multipleList = ref([])
    const getDateDay = (date: string) => {
      const week = [ '日', '一', '二', '三', '四', '五', '六']
      return week[dayjs(date).day()]
    }
    // 点击某一条账单，跳转到详情编辑页
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleGoDetail = (item: any) => {
      switch (props.multipleShow) {
        case false:
          router.push({
            path: '/billDetail',
            query: {
              id: item.id
            }
          })
          break;
        case true:
          if(multipleList.value.indexOf(item as never) === -1) {
            multipleList.value.push(item as never)
          } else {
            multipleList.value.splice(multipleList.value.indexOf(item as never), 1)
          }
          break;
        default:
          break;
      }
    }
    // 通过classId获取类名
    const getTitle = (isSub: boolean, id: number) => {
      return getClassTitle(isSub, id, classList.value)
    }
    // 长按开始事件
    const touchStart = () => {
      clearInterval()
      touchInterval = setTimeout(() => {
        store.commit('get_footer_visible', false)
      }, 3000)
    }
    // 长按结束事件
    const touchEnd = () => {
      clearInterval()
    }
    // 清除长按定时器
    const clearInterval = () => {
      clearTimeout(touchInterval)
    }
    const getFormatDate = (date: string) => {
      const today = dayjs().format("YYYY-MM-DD")
      const yesterday = dayjs(new Date(new Date().getTime() - 86400000)).format("YYYY-MM-DD")
      console.log(today, yesterday, '123');
      if(date === today) {
        return "今天"
      } else if(date === yesterday) {
        return "昨天"
      } else {
        return date
      }
    }
    return {
      multipleList,
      getDateDay,
      handleGoDetail,
      getTitle,
      touchStart,
      touchEnd,
      getFormatDate
    }
  }
});
</script>

<style scoped>
  .card_title {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-family: 'XiaMu';
  }
  .title_date_day {
    font-size: 16px;
    font-weight: 600;
    padding-right: 8px;
  }
  .title_date_week {
    color: grey;
  }
  .money_total {
    font-size: 16px;
    color: grey;
    display: inline-block;
    padding-left: 20px;
  }
  .money_total_income {
    color: 	#5dbb41;
  }
  .money_total_pay {
    color: #eb7775;
  }
  .card_list {
    border-radius: 8px;
    background-color: #f9c3c233;
    padding: 10px 4px;
  }
  .card_list_item {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 0 10px;
    align-items: center;
  }
  .item_icon {
    display: flex;
    align-items: center;
  }
  .item_icon img {
    height: 20px;
    width: 20px;
  }
  .item_text {
    padding: 0 10px;
    text-align: left;
  }
  .item_text_desc {
    font-size: 12px;
    color: grey;
  }
  .item_money {
    text-align: right;
  }
  .item_money_account {
    font-size: 12px;
    color: grey;
  }
  .bill_icon {
    font-size: 20px;
  }
</style>
